import "./case.js"
import "../css/animate.min.css"
import "../css/case.css"

//整合首页用到的所有js
import {
    getCasePage,
} from "./request.js";

let imgs = document.querySelectorAll("img")

//图片添加类名进行懒加载
imgs.forEach(item => {
    item.classList.add("lazy-img")
})

import {
    lazyLoad
} from "../utils/lazyLoad.js";
window.onload = async function () {
    let resCase = await getCasePage();
    let res = resCase.results
    let address = [];
    //拿到每个图片的地址
    res.forEach((item)=>{
        address.push(item.photo_detail.url)
    })
    //将每张图片地址给到每个img
    imgs.forEach((item,index)=>{
        item.setAttribute("data-src",address[index])
    })
    
    //懒加载
    lazyLoad(".lazy-img");
};

let btns = document.querySelectorAll(".goodCase>ul>li")
let photo = document.querySelectorAll(".goodCase>div")
let dot = document.querySelectorAll(".casePhoto>li")
let sponsors = document.querySelectorAll(".partner>ul>li>img")
let packing = document.querySelectorAll(".solve>ol>li>img")


//设置选项卡
btns.forEach((item,index)=>{
    item.addEventListener("click",()=>{
        for(let i =0;i<btns.length;i++){
            btns[i].classList.remove("change")
            photo[i].classList.remove("active")
        }
        btns[index].classList.add("change")
        photo[index].classList.add("active")
    })
})

//设置包装图片动态效果
packing.forEach(item=>{
    item.classList.add("animated")
    item.classList.add("pulse")
    item.classList.add("infinite")
})

//设置案例动态效果
let flag = false
dot.forEach((item,index)=>{
    if(index===4){
        item.addEventListener("click",()=>{
            flag = !flag
            console.log(flag);
            if(flag){
                dot[0].classList.add("moveA")
                dot[1].classList.add("moveB")
                dot[2].classList.add("moveC")
                dot[3].classList.add("moveD")
                dot[5].classList.add("moveE")
                dot[6].classList.add("moveF")
                dot[7].classList.add("moveG")
                dot[8].classList.add("moveH")
            }else{
                dot[0].classList.remove("moveA")
                dot[1].classList.remove("moveB")
                dot[2].classList.remove("moveC")
                dot[3].classList.remove("moveD")
                dot[5].classList.remove("moveE")
                dot[6].classList.remove("moveF")
                dot[7].classList.remove("moveG")
                dot[8].classList.remove("moveH")
            }
        })
    }
})

//设置赞助商特效
sponsors.forEach((item) => {
    item.addEventListener("mousemove", () => {
        item.classList.add("animated")
        item.classList.add("swing")
        item.classList.add("infinite")
    })
    item.addEventListener("mouseout",()=>{
        item.classList.remove("animated")
    })
})